<template>
  <div class="ColorCountCard">
    <p class="title"><span>{{$t('dashboard.positionReview')}}</span> - {{moment(text).format('YYYY 年 MM 月')}}</p>
    <div class="content">
      <div v-for="item in dataList" :key="item.key" @click="handle(item)" :class="item.css">
        <span  v-html="numberFormat(item.value)" class="unit"></span>
        <span>{{ $t(item.name) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { numberFormat } from '@/util/tools'
import moment from 'moment'
export default {
  name: 'ColorCountCard',
  props: ['dataList', 'status'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    numberFormat,
    moment,
    handle (item) {
      this.$emit('search', item)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ColorCountCard
  background #fff
  padding 24px 0
  border-radius borderRadius
  // border 1px solid borderColor
  .title
    padding 0 24px 12px
    span
      font-size 18px
      font-weight bold
  .content
    display flex
    >div
      cursor pointer
      color cccGrey
      flex 1
      text-align center
      border-right 1px solid borderColor
      display flex
      flex-direction column
      padding 24px 0
      &:last-child
        border 0
      >span
        font-size 48px
        font-family Arial Black, Gadget, sans-serif
        font-weight bold
        &:last-child
          font-weight normal
          font-size 14px
        // color BGblue
  .black
    color textGrey!important
  .green
    color lightGreen!important
  .red
    color red!important
  .blue
    color var(--blue-500)!important
  .grey
    color cccGrey!important
  .orange
    color orange!important
</style>
